import React, { useEffect } from 'react';
import { Tabs } from 'antd';
import styles from './Index.less';
import { useLocation } from 'umi';
import config from '../../../config/config';
import {useGlobalShare} from "../../../models/globalShare";
import useSettingState from '../models/settingState';
import LLMTabPane from "../components/setting/LLMTabPane";
import RAGTabPane from "../components/setting/RAGTabPane"
import StyleTabPane from "../components/setting/StyleTabPane";
import PersonTabPane from "../components/setting/PersonTabPane";
import AgentTabPane from "../components/setting/AgentTabPane";
import MemoryTabPane from "../components/setting/MemoryTabPane";

const TabPane = Tabs.TabPane;

const SettingPage = () => {

    const { state } = useLocation();
    console.log("SettingPage state => ", state);
    const { themeColor, setThemeColor, currentUser, setCurrentUser } = useGlobalShare();
    const { ollamaModels, loadOllamaModels, onSaveSetting, loadSettingItem, settingItemMap, onSaveUser } = useSettingState();

    useEffect(() => {
        loadOllamaModels();
        loadSettingItem({ "source": "llm" });
    }, []);

    const llmTabPaneProps = {
        themeColor,
        ollamaModels,
        onSaveSetting,
        settingItemMap,
        defaultThemeColor: () => {
            setThemeColor(config.theme_color[0].value);
        }
    }

    const ragTabPaneProps = {
        themeColor,
        ollamaModels,
        selectModel: () => {},
        defaultThemeColor: () => {
            setThemeColor(config.theme_color[0].value);
        },
        changeThemeColor: (event) => {
            setThemeColor(event.target.value);
        }
    }

    const styleTabPaneProps = {
        themeColor,
        onChangeColor: (color) => {
            setThemeColor(color);
        },
        selectModel: () => {},
        defaultThemeColor: () => {
            setThemeColor(config.theme_color[0].value);
        },
        changeThemeColor: (event) => {
            setThemeColor(event.target.value);
        }
    }

    const agentTabPaneProps = {}

    const memoryTabPaneProps = {}

    const personTabPaneProps = {
        themeColor,
        currentUser,
        onCacheUser: (user) => {
            setCurrentUser(user);
            sessionStorage.setItem("currentUser", JSON.stringify(user));
        },
        onSaveUser: (user) => {
            setCurrentUser(user);
            onSaveUser(user);
            sessionStorage.setItem("currentUser", JSON.stringify(user));
        }
    }

    return (
        <div style={{ width: "100%", height: "100%" }}>
            <Tabs tabPosition="left" className={styles.setting_tab_list} defaultActiveKey={state?.activeKey}>
                <TabPane key="llm" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-ai-generate-2" style={{ paddingRight: 10 }} />LLM设置</span>}>
                    <LLMTabPane { ...llmTabPaneProps } />
                </TabPane>
                <TabPane key="rag" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-chat-search-line" style={{ paddingRight: 10 }} />RAG设置</span>}>
                    <RAGTabPane { ...ragTabPaneProps } />
                </TabPane>
                <TabPane key="agent" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-ai-agent-line" style={{ paddingRight: 10 }} />Agent设置</span>}>
                    <AgentTabPane { ...agentTabPaneProps } />
                </TabPane>
                <TabPane key="memory" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-server-line" style={{ paddingRight: 10 }} />Memory设置</span>}>
                    <MemoryTabPane { ...memoryTabPaneProps } />
                </TabPane>
                <TabPane key="person" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-shield-user-line" style={{ paddingRight: 10 }} />个人中心</span>}>
                    <PersonTabPane { ...personTabPaneProps } />
                </TabPane>
                <TabPane key="style" tab={<span style={{ padding: "0px 0px 0px 20px" }}><i className="ri-palette-line" style={{ paddingRight: 10 }} />样式设置</span>}>
                    <StyleTabPane { ...styleTabPaneProps } />
                </TabPane>
            </Tabs>
        </div>
    );
};

export default SettingPage;